<template>
	<view class="container-box">
		<view class="map-box">
			<map class="map" :scale="scale" :latitude="latitude" :longitude="longitude" :markers="covers"
				 @controltap="onControltap">
			</map>
			<!-- :polyline="polyline" :controls="controls" :circles="circles" -->
		</view>
		<view class="punch-card-history">

			<uni-list>
				<uni-list-item v-for="(item,index) in placeList" title="打卡" :show-badge="true" :badge-text="item.createTime" 
					:data-index="index" :data-id="item.placeId" clickable @click="placeClick($event, index)">
				</uni-list-item>
			</uni-list>
		</view>
		<button type="primary" class="punch-card-button" @click="punchCardEvent">打卡</button>
	</view>
</template>

<script>
	import {
		getPlaceList,
		addPlace,
		getPlace
	} from '@/api/record/place.js'
	
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				scale: 1,
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					id:1,
					latitude: 39.909,
					longitude: 116.39742,
					width:50,
					height:50
				}],
				params:{
					placeType:'clock_in',
					pageNum: 1,
					pageSize: 10,
					},
				placeList:[]
				/* circles: [{
					latitude: 39.909,
					longitude: 116.39742,
					color: '#000000AA',
					fillColor: '#000000AA',
					radius: 12,
					strokeWidth: 1,
					level: 'abovelabels'
				}],
				polyline: [{
					'points': [{
						latitude: 39.909,
						longitude: 116.39742
					}, {
						latitude: 39.908,
						longitude: 116.39742
					}],
					color: '#000000',
					width: 3
				}],
				controls: [{
					id: 1,
					position: { //控件在地图的位置
						left: 15,
						top: 15,
						width: 100,
						height: 100
					},
					iconPath: '../../../static/logo.png'
				}] */
			}
		},
		onLoad() {
			var that = this;
			/* uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.latitude = res.latitude;
					that.longitude = res.longitude;
				}
			}); */
			this.initPlace();
		},
		onReady() {
			
		},
		methods: {
			initPlace() {
				getPlaceList(this.params).then(response => {
					console.log(response.rows);
					this.placeList = response.rows
					
				})
			},
			placeClick(e, index) {
				var item = this.placeList[index]
				this.initlatitudelongitude(item)
			},
			initlatitudelongitude(item){
				this.scale = 16;
				this.latitude = item.latitude;
				this.longitude = item.longitude;
				this.covers[0].latitude = item.latitude;
				this.covers[0].longitude = item.longitude;
				this.covers[0].iconPath = '../../../static/images/location.png';
			},
			punchCardEvent(e) {
				var that = this;
				if (uni.getSystemInfoSync().platform === 'mp-weixin'){
					uni.authorize({
					    scope: 'scope.userLocation',
					    success() {
							this.getLocation()
						}
					})
				} else {
					this.getLocation()
				}
				
			},
			getLocation(){
				var that = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						that.initlatitudelongitude(res)
						var addParam = {
							placeType: that.params.placeType,
							latitude:res.latitude,
							longitude:res.longitude,
						}
						addPlace(addParam).then(response => {
							that.initPlace();
						})
					}
				});
			},
			onControltap(control) {
				console.log('点击了回到原点')
				uni.createMapContext("map", this).moveToLocation({
					longitude: this.longitude,
					latitude: this.latitude,
				});
			}
		}
	}
</script>

<style>
	.container-box {
		height: 100%;
		width: 100%;
	}

	.punch-card-button {
		width: 100px;
		height: 100px;
		line-height: 100px;
		border-radius: 50px;
		text-align: center;
		font-weight: bolder;
		position: fixed;
		left: 50%;
		bottom: 50px;
		margin-left: -50px;
	}

	.map {
		width: 100%;
		height: 250px;
		flex: 1;
	}
	
	.img-cover-box {
	    position: relative;
	    width: 100vw;
	    height: 100vh;
	    background-color: #e6f7ce;
	}
</style>